<!-- 课程计划 -->
<template>
  <div>
    <div>
      <!-- 下拉选择学期 -->
      <el-select
          class="semester-select"
          @change="handleSelectChange"
          clearable
          v-model="value"
          placeholder="请选择学期"
      >
        <el-option
            v-for="(item, index) in semesterData"
            :key="index"
            :value="item"
        ></el-option>
      </el-select>

      <!-- 添加课程计划 -->
      <div>
        <el-upload
            class="add-button"
            ref="upload"
            accept=".xls,.xlsx"
            action="http://localhost:8080/upload"
            :on-remove="handleRemove"
            :on-error="handleError"
            :on-success="uploadSuccess"
            :disabled="importBtnDisabled"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
        >
          <el-button
              style="margin-left: 10px"
              slot="trigger"
              size="small"
              type="primary"
          >从Excel导入<i class="el-icon-upload2 el-icon--right"></i
          ></el-button>
          <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              :loading="loading"
              @click="submitUpload"
          >上传到服务器<i class="el-icon-upload el-icon--right"></i
          ></el-button>


          <!-- 下载模板 <a class="atag" href="http://localhost:8080/download">-->
          <el-button
              class="add-button"
              size="small"
              type="primary"
              @click="downloadTemplate()"
          >
            下载模板
            <i class="el-icon-download el-icon--right"></i>
          </el-button>

          <div slot="tip" class="el-upload__tip">
            <!-- 只能上传xls/xlsx文件,导入新任务后将清空原来的任务,请一次性将本学期课程导入完毕 -->
          </div>
        </el-upload>
        <el-button
            class="add-button"
            size="small"
            type="primary"
            @click="arrangeCourse()"
        >
          排课
          <i class="el-icon-thumb el-icon--right"></i>
        </el-button>
      </div>
      <el-button
          class="add-button"
          size="small"
          type="primary"
          @click="addClassTask"
      >手动添加
      </el-button
      >


    </div>
    <!-- 开课任务，等待排课的课程 -->
    <el-table
        class="ckasstask-table"
        :data="classTaskData"
        size="mini"
        :stripe="true"
        :highlight-current-row="true"
        style="height: 600px;"
    >
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="semester" label="学期"></el-table-column>
      <el-table-column
          prop="gradeNo"
          label="年级"
          width="60px"
      ></el-table-column>
      <el-table-column prop="classNo" label="班级"></el-table-column>
      <el-table-column prop="courseNo" label="课号"></el-table-column>
      <el-table-column prop="courseName" label="课名"></el-table-column>
      <el-table-column prop="courseAttr" label="课属性"></el-table-column>
      <el-table-column prop="teacherNo" label="讲师编号"></el-table-column>
      <el-table-column prop="realname" label="讲师"></el-table-column>
      <el-table-column prop="studentNum" label="学生人数"></el-table-column>
      <el-table-column prop="weeksNumber" label="周学时"></el-table-column>
      <el-table-column prop="weeksSum" label="周数"></el-table-column>
      <!-- 是否固定时间 -->
      <el-table-column prop="isFix" label="固定"></el-table-column>
      <!-- 只有固定上课时间才会有固定的时间在时间这个列中 -->
      <el-table-column prop="classTime" label="时间"></el-table-column>

      <el-table-column prop="operation" label="操作" width="180">
        <template #default="scope">
          <el-button
              type="danger"
              size="mini"
              @click="deleteById(scope.$index, scope.row)"
          >删除
          </el-button
          >

          <el-button
              type="primary"
              size="mini"
              @click="editById(scope.$index, scope.row)"
          >编辑
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出表单添加讲师 -->
    <el-dialog title="添加任务(参照模板填写)" v-model="visible">
      <el-form
          ref="addClassTaskFormRef"
          :model="addClassTaskForm"
          label-position="left"
          label-width="80px"
          :rules="addClassTaskRules"
      >
        <el-form-item label="学期" prop="semester">
          <el-input
              v-model="addClassTaskForm.semester"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="gradeNo">
          <el-input
              v-model="addClassTaskForm.gradeNo"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级编号" prop="classNo">
          <el-input
              v-model="addClassTaskForm.classNo"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程编号" prop="courseNo">
          <el-input
              v-model="addClassTaskForm.courseNo"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程名" prop="courseName">
          <el-input
              v-model="addClassTaskForm.courseName"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲师编号" prop="teacherNo">
          <el-input
              v-model="addClassTaskForm.teacherNo"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲师名字" prop="realname">
          <el-input
              v-model="addClassTaskForm.realname"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程属性" prop="courseAttr">
          <el-input
              v-model="addClassTaskForm.courseAttr"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生人数" prop="studentNum">
          <el-input
              v-model="addClassTaskForm.studentNum"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="周学时" prop="weeksNumber">
          <el-input
              v-model="addClassTaskForm.weeksNumber"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="周数" prop="weeksSum">
          <el-input
              v-model="addClassTaskForm.weeksSum"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否固定" prop="isFix">
          <el-input
              v-model="addClassTaskForm.isFix"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="上课时间" prop="classTime">
          <el-input
              v-model="addClassTaskForm.classTime"
              autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="commit()">提 交</el-button>
      </div>
    </el-dialog>


    <!--    &lt;!&ndash; 编辑 &ndash;&gt;-->
    <!--    <el-dialog title="编辑任务(参照模板填写)" v-model="edvisible">-->
    <!--      <el-form-->
    <!--          ref="editlassTaskFormRef"-->
    <!--          :model="editlassTaskForm"-->
    <!--          label-position="left"-->
    <!--          label-width="80px"-->
    <!--          :rules="addClassTaskRules"-->
    <!--      >-->
    <!--        <el-form-item label="学期" prop="semester">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.semester"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="年级" prop="gradeNo">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.gradeNo"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="班级编号" prop="classNo">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.classNo"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="课程编号" prop="courseNo">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.courseNo"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="课程名" prop="courseName">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.courseName"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="讲师编号" prop="teacherNo">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.teacherNo"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="讲师名字" prop="realname">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.realname"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="课程属性" prop="courseAttr">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.courseAttr"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="学生人数" prop="studentNum">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.studentNum"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="周学时" prop="weeksNumber">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.weeksNumber"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="周数" prop="weeksSum">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.weeksSum"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="是否固定" prop="isFix">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.isFix"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="上课时间" prop="classTime">-->
    <!--          <el-input-->
    <!--              v-model="editlassTaskForm.classTime"-->
    <!--              autocomplete="off"-->
    <!--          ></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="edvisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="edcommit()">提 交</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <!-- 分页 -->
    <div class="footer-button">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, getCurrentInstance, watchEffect} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();

const value = ref(''); // 学期选择绑定的值
const importBtnDisabled = ref(false); // 按钮是否禁用
const loading = ref(false); // 是否正在上传
const fileList = ref([]); // 文件列表
const visible = ref(false); // 弹出表单是否可见
const type = ref(1)
const edvisible = ref(false); // 编辑表单是否弹出

const page = ref(1); // 当前页
const total = ref(0); // 总条数
const pageSize = ref(10); // 每页显示数量
const semesterData = ref([]); // 学期数据
const classTaskData = ref([]); // 课程任务数据
const addClassTaskForm = ref({
  semester: '',
  gradeNo: '',
  classNo: '',
  courseNo: '',
  courseName: '',
  teacherNo: '',
  realname: '',
  courseAttr: '',
  studentNum: '',
  weeksNumber: '',
  weeksSum: '',
  isFix: '',
  classTime: '',
});
const editlassTaskForm = ref({
  id: '',
  semester: '',
  gradeNo: '',
  classNo: '',
  courseNo: '',
  courseName: '',
  teacherNo: '',
  realname: '',
  courseAttr: '',
  studentNum: '',
  weeksNumber: '',
  weeksSum: '',
  isFix: '',
  classTime: '',
});

// 添加课程任务表单数据
const addClassTaskRules = reactive({
  semester: [{required: true, message: '请输入学期', trigger: 'blur'}],
  gradeNo: [{required: true, message: '请输入年级编号', trigger: 'blur'}],
  classNo: [{required: true, message: '请输入班级编号', trigger: 'blur'}],
  courseNo: [{required: true, message: '请输入课程编号', trigger: 'blur'}],
  courseName: [{required: true, message: '请输入课程名称', trigger: 'blur'}],
  teacherNo: [{required: true, message: '请输入讲师编号', trigger: 'blur'}],
  realname: [{required: true, message: '请输入讲师姓名', trigger: 'blur'}],
  courseAttr: [{required: true, message: '请输入课程属性', trigger: 'blur'}],
  studentNum: [{required: true, message: '请输入班级学生人数', trigger: 'blur'}],
  weeksNumber: [{required: true, message: '请输入周学时', trigger: 'blur'}],
  weeksSum: [{required: true, message: '请输入上课周数', trigger: 'blur'}],
  isFix: [{required: true, message: '是否固定上课时间', trigger: 'blur'}],
  classTime: [],
});

const semester = ref([]); // 当前选择的学期

onMounted(() => {
  allClassTask()
  getSemester()
})

const handleSelectChange = (val) => {
  // 这里的V就是选择的学期了
  semester.value = val;
};

const handleRemove = () => {
};

const handleError = (error, file, fileList) => {
  alert('文件上传失败' + error);
};

const uploadSuccess = (response, file, fileList) => {
  loading.value = false;
  ElMessage({message: '上传成功', type: 'success'});
};

const submitUpload = async () => {
  loading.value = true;
  importBtnDisabled.value = true;
  fileList.value.forEach((file) => {
    file.status = 'uploading';
  });

  proxy.$refs.upload.submit();

  allClassTask();
  getSemester()
};

// 下载模板
const downloadTemplate = () => {
  window.location.href = 'http://localhost:8080/download';
};

const handleSizeChange = () => {
};

const handleCurrentChange = (v) => {
  page.value = v;
  allClassTask();
};

// 手动添加课程任务
const addClassTask = () => {
  visible.value = true;
  type.value = 2
};

const validateForm = () => {
  return new Promise((resolve) => {
    proxy.$refs.addClassTaskFormRef.validate((valid) => {
      resolve(valid);
    });
  });
};
const addClassTaskData = async (data) => {
  console.log(data)
  await proxy.$api.addClasstask(data);
  ElMessage({
    message: '添加课程任务成功！',
    type: 'success'
  });
  visible.value = false;
  allClassTask();
}
const commit = async () => {
  const valid = await validateForm();
  if (!valid) {
    ElMessage.error('请输入对应参数');
    return
  }
  if (type.value === 1) {
    edcommit(addClassTaskForm.value)
  } else {
    addClassTaskData(addClassTaskForm.value)
  }
}


// 点击开始提交学期到系统后台排课
const arrangeCourse = async () => {
  await proxy.$api.arrangeCourse(semester.value);
  allClassTask();
  ElMessage({
    message: '排课成功',
    type: 'success'
  });
  router.push({
    name: "CourseTable",
  })
};

// 删除开课任务
const deleteById = async (index, row) => {
  await proxy.$api.deleteClasstask(row.id);
  classTaskData.value.splice(index, 1);
  ElMessage({message: '删除成功', type: 'success'});
};

const editById = (index, row) => {
  type.value = 1
  addClassTaskForm.value.id = row.id;
  addClassTaskForm.value.semester = row.semester
  addClassTaskForm.value.gradeNo = row.gradeNo
  addClassTaskForm.value.classNo = row.classNo
  addClassTaskForm.value.courseNo = row.courseNo
  addClassTaskForm.value.courseName = row.courseName
  addClassTaskForm.value.teacherNo = row.teacherNo
  addClassTaskForm.value.realname = row.realname
  addClassTaskForm.value.courseAttr = row.courseAttr
  addClassTaskForm.value.studentNum = row.studentNum
  addClassTaskForm.value.weeksNumber = row.weeksNumber
  addClassTaskForm.value.isFix = row.isFix
  addClassTaskForm.value.weeksSum = row.weeksSum
  addClassTaskForm.value.classTime = row.classTime
  // edvisible.value = true;
  visible.value = true;
};


const edcommit = async (data) => {
  proxy.$api.modifyClasstask(data).then(() => {
    ElMessage({message: '修改成功', type: 'success'});
    edvisible.value = false;
    editlassTaskForm.value = {}
    allClassTask();
  })
}

/**
 * 获得学期列表后默认填充第一个到学期选择下拉列表中
 * 这里只放一个学期先
 */
const getSemester = async () => {
  const result = await proxy.$api.getSemester();
  semesterData.value = result;
};

/**
 * 获得所有开课任务
 */
const allClassTask = async () => {
  const result = await proxy.$api.allClassTask(page.value, semester.value);
  classTaskData.value = result.records;
  total.value = result.total;
  if (total.value == 0) {
    ElMessage({message: "查询不到开课任务", type: "success"});
  }
};

watchEffect(() => {
  allClassTask();
}, {immediate: true})
</script>

<style lang="less" scoped>
.footer-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.semester-select {
  float: left;
  margin-bottom: 10px;
}

.tips {
  float: left;
  margin-left: 5px;
}

.ckasstask-table {
  margin-top: 10px;
}

.add-button {
  float: left;
  margin-left: 15px;
}
</style>

  